<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.service') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col
        v-for="item in renderData_new"
        :key="item.id"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
        style="min-height: 162px"
      >
        <CardWrap
          :loading="loading"
          :title="item.title"
          :id="item.id"
          :description="item.description"
          :default-value="item.enable"
          :action-type="item.actionType"
          :expires="item.expires"
          :open-txt="$t('cardList.service.open')"
          :close-txt="$t('cardList.service.cancel')"
          :expires-text="$t('cardList.service.renew')"
          :tag-text="$t('cardList.service.tag')"
          :expires-tag-text="$t('cardList.service.expiresTag')"
          :icon="item.icon"
        >
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { queryTheServiceList, ServiceRecord } from '@/api/list';
  import useRequest from '@/hooks/request';
  import CardWrap from './card-wrap.vue';
  import { removeMyInterceptor } from "@/api/interceptor";
  import axios from "axios";
  import useLoading from '../../../../hooks/loading';
import { reactive } from 'vue';

  let isLoading = true;
  // const defaultValue: ServiceRecord[] = new Array(4).fill({});
  // const { loading, response: renderData } = useRequest<ServiceRecord[]>(
  //   queryTheServiceList,
  //   defaultValue
  // );

  removeMyInterceptor();

  let renderData:any;
  var item:any;
  let renderData_new : ServiceRecord[] =reactive([]); 
  const { loading, setLoading } = useLoading(isLoading);
  axios({
    method: 'post',           /* 指明请求方式，可以是 get 或 post */
    url: 'team/viewAllTeam',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
      role:1,
      userID: localStorage.getItem('id'),
    })
  }).then((res)=>{

    console.log(res)
      renderData = res.data.data
      console.log(renderData)

   
        
    for(item in renderData){

    console.log(renderData[item])
    const new_item = {
      title: renderData[item].teamName,
      name: 'quality',
      id: renderData[item].id,
      description: renderData[item].createTime,
      data:[
        {
          label:'成员数',
          value:renderData[item].memberCnt
        }
      ]
    }
    renderData_new.push(new_item);
  }

      setLoading(false);
  });
</script>

<style scoped lang="less"></style>
